<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--css样式的导入-->
		<link href="css/DaoHang.css" type="text/css" rel="stylesheet">
		<!--三个导入-->
		<link href="bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="bootstrap-3.3.5-dist/jquery/jquery-3.0.0.min.js"></script>
		<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			body {
				background-color: #000000;
			}
			
			.btn {
				width: 60%;
				height: 40px;
				margin-left: 22%;
				margin-top: 50px;
				float: left;
				border: 1px solid black;
				border-radius: 10px;
				background-color: aqua;
			}
			
			#zzz {
				/*border: 10px solid #FF0000;*/
				width: 20%;
				position: fixed;
				left: -25%;
				transition: left 2s;
				top: 10px;
			}
			
			#yyy {
				border: 1px solid #000;
				border-radius: 100px;
				width: 60%;
				float: right;
				position: fixed;
				right: -65%;
				transition: right 2s;
				top: 100px;
				background-image: url(img/020.png);
			}
			
			#www {
				width: 100%;
				display: none;
				position: absolute;
				left: 0;
				top: 0;
				z-index: -100;
			}
			
			#zhushen {
				width: 301px;
				height: 301px;
			}
		</style>
	</head>

	<body>
		<!--全局导航栏的层，永远固定在窗口最上侧-->
		<div id="div001">
			<!--导航栏样式-->
			<nav class="navbar navbar-inverse" role="navigation">
				<!--导航栏居中部分的层，宽度70%，据左15%-->
				<div id="div002">
					<!--导航栏上左侧logo部分-->
					<div class="navbar-header">
						<!--屏幕宽度自适应，当屏幕变窄时，会自动切换样式，引用的bootstrap框架，其原理不明-->
						<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse"> <span class="sr-only">切换导航</span> <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> </button>
						<!--导航栏上的网站LOGO-->
						<a class="navbar-brand" href="#"> <img id="div003" src="images/019.png"> <span id="div004">大千世界观望者</span></a>
					</div>
					<!--包含导航栏上右侧的下拉菜单的层-->
					<div class="collapse navbar-collapse navbar-right" id="example-navbar-collapse">
						<!--下拉菜单样式-->
						<ul class="nav navbar-nav">
							<!--右侧下拉菜单：传送门-->
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown"> 传送门 <b class="caret"></b> </a>
								<!--下拉菜单内的内容-->
								<ul class="dropdown-menu" id="div005">
									<li>
										<a href="#">观望多元宇宙</a>
									</li>
									<li class="divider"></li>
									<li>
										<a href="#">主神空间</a>
									</li>
									<li class="divider"></li>
									<li>
										<a href="#">游戏</a>
									</li>
								</ul>
							</li>
							<!--右侧下拉菜单：关于我们-->
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown"> 关于我们 <b class="caret"></b></a>
								<!--下拉菜单内的内容-->
								<ul class="dropdown-menu" id="div005">
									<li>
										<a href="#">加入我们</a>
									</li>
									<li class="divider"></li>
									<li>
										<a href="#">网站声明</a>
									</li>
								</ul>
							</li>
						</ul>
						<!--下拉菜单样式（结束）-->
					</div>
					<!--包含导航栏上右侧的下拉菜单的层(结束)-->
				</div>
				<!--导航栏居中部分的层，宽度70%，据左15%（结束）-->
			</nav>
			<!--导航栏样式（结束）-->
		</div>
		<!--全局导航栏的层，永远固定在窗口最上侧（结束）-->
		<!---------------------------------------------------------------------------------------------------->
		<!---------------------------------------------------------------------------------------------------->
		<!---------------------------------------------------------------------------------------------------->
		<!---------------------------------------------------------------------------------------------------------->
		<!---------------------------------------------------------------------------------------------------------->
		<!---------------------------------------------------------------------------------------------------------->
		<!---------------------------------------------------------------------------------------------------------->
		<!--主神-->
		<div id="zhushen"><img src="img/001.gif" onclick="zhushen()"></div>
		<!--左边框-->
		<div id="zzz">

			<a href="#"><input id="aaa" class="btn" type="button" value="科技类" onmouseover="over(this)" onmouseout="out(this)" /></a>
			<a href="#"><input id="bbb" class="btn" type="button" value="辅助类" onmouseover="over(this)" onmouseout="out(this)" /></a>
			<a href="#"><input id="ccc" class="btn" type="button" value="魔法修真类" onmouseover="over(this)" onmouseout="out(this)" /></a>
			<a href="#"><input id="ddd" class="btn" type="button" value="娱乐类" onmouseover="over(this)" onmouseout="out(this)" /></a>
		</div>
		<!--右边框-->
		<div id="yyy">

		</div>
		<div id="www" onclick="zhezhaoceng()"></div>
	</body>

</html>
<script>
	var zzz = document.getElementById("zzz");
	var yyy = document.getElementById("yyy");
	var www = document.getElementById("www");
	var zhushen01 = document.getElementById("zhushen");
	var div001=document.getElementById("div001");

	//右侧边框的高度
	yyy.style.height = window.innerHeight - 200 + "px";
	//遮罩层高度
	www.style.height = window.innerHeight + "px";

	//浏览器窗口变化时，相关元素的高度跟随变化
	window.onresize = function() {
		yyy.style.height = window.innerHeight - 200 + "px";
		www.style.height = window.innerHeight + "px";
	}

	//鼠标移入按钮，按钮变大
	function over(e) {
		e.style.width = "80%";
		e.style.height = "80px";
		e.style.marginLeft = "10%";
		e.style.marginTop = "30px";
	}
	//鼠标移出按钮，按钮恢复原样
	function out(e) {
		e.style.width = "60%";
		e.style.height = "40px";
		e.style.marginLeft = "22%";
		e.style.marginTop = "50px";
	}

	//左边框出现
	function over_zzz() {
		zzz.style.left = "0px";

	}

	//右边框出现，并且主神隐藏
	function over_yyy() {
		yyy.style.right = "10%";
		setTimeout("zs_yincang()", "800");
	}

	//主神出现
	function zs_show() {
		zhushen01.style.display = "inline";
	}

	//主神隐藏
	function zs_yincang() {
		zhushen01.style.display = "none";
	}

	//单击主神，主神隐藏，其它元素出现
	function zhushen() {
		over_zzz();
		over_yyy();
		www.style.display = "inline";
		dh_YinCang();
	}

	//主神居中事件
	$(window).resize(function() {
		$("#zhushen").css({
			position: "fixed",
			left: ($(window).width() - $("#zhushen").outerWidth()) / 2,
			top: ($(window).height() - $("#zhushen").outerHeight()) / 2 + $(document).scrollTop()
		});
	});
	$(window).resize();
	//遮罩层
	function zhezhaoceng() {
		www.style.display = "none";
		zzz.style.left = "-25%";
		yyy.style.right = "-65%";
		//延迟0.6秒调用显示主神
		setTimeout("zs_show()", "400");
		dh_XianShi();

	}
	//导航栏自动向上隐藏
	function dh_YinCang(){
		div001.style.top="-100px";
	}
	//导航栏恢复原样
	function dh_XianShi(){
		div001.style.top="0px";
	}
</script>